class BannerManager {
    constructor() {
        this.currentIndex = 0;
        this.autoPlayInterval = null;
        this.init();
    }

    async init() {
        await this.loadBanners();
        this.setupControls();
        this.startAutoPlay();
    }

    async loadBanners() {
        try {
            const banners = await fetchData(API.BANNER.LIST);
            this.renderBanners(banners);
            document.querySelector('.banner-loading').style.display = 'none';
        } catch (error) {
            this.showError();
        }
    }

    renderBanners(banners) {
        const container = document.getElementById('bannerSlides');
        const pagination = document.querySelector('.pagination');

        // 清空现有内容
        container.innerHTML = '';
        pagination.innerHTML = '';

        banners.forEach((banner, index) => {
            // 创建轮播项
            const slide = document.createElement('div');
            slide.className = `banner-slide ${index === 0 ? 'active' : ''}`;
            slide.innerHTML = `
                <a>
                    <img src="${banner.imgUrl}">
                </a>
            `;
            container.appendChild(slide);

            // 创建分页点
            const dot = document.createElement('div');
            dot.className = `pagination-dot ${index === 0 ? 'active' : ''}`;
            dot.dataset.index = index;
            pagination.appendChild(dot);
        });

        this.slides = document.querySelectorAll('.banner-slide');
        this.dots = document.querySelectorAll('.pagination-dot');
    }

    setupControls() {
        // 上一页按钮
        document.querySelector('.prev-btn').addEventListener('click', () =>
            this.changeSlide(this.currentIndex - 1)
        );

        // 下一页按钮
        document.querySelector('.next-btn').addEventListener('click', () =>
            this.changeSlide(this.currentIndex + 1)
        );

        // 分页点点击
        document.querySelectorAll('.pagination-dot').forEach(dot => {
            dot.addEventListener('click', () =>
                this.changeSlide(parseInt(dot.dataset.index))
            );
        });
    }

    changeSlide(newIndex) {
        // 边界处理
        if (newIndex >= this.slides.length) newIndex = 0;
        if (newIndex < 0) newIndex = this.slides.length - 1;

        // 更新当前激活项
        this.slides[this.currentIndex].classList.remove('active');
        this.dots[this.currentIndex].classList.remove('active');

        this.currentIndex = newIndex;

        this.slides[this.currentIndex].classList.add('active');
        this.dots[this.currentIndex].classList.add('active');

        // 重置自动播放
        this.resetAutoPlay();
    }

    startAutoPlay() {
        this.autoPlayInterval = setInterval(() =>
            this.changeSlide(this.currentIndex + 1), 5000
        );
    }

    resetAutoPlay() {
        clearInterval(this.autoPlayInterval);
        this.startAutoPlay();
    }

    showError() {
        const container = document.querySelector('.banner-container');
        container.innerHTML = `
            <div class="banner-error">
                <p>⚠️ 轮播图加载失败</p>
                <button onclick="location.reload()">点击重试</button>
            </div>
        `;
    }
}

// 初始化Banner
document.addEventListener('DOMContentLoaded', () => {
    new BannerManager();
});